
/**
 * 显示工具提示框
 * 该函数用于在鼠标位置附近显示一个工具提示框，其中包含从给定文件URL加载的内容
 * @param {string} fileURL - 要在工具提示框中加载的文件URL
 * @param {Object} e - 鼠标事件对象，包含鼠标位置信息
 */
function showTooltip(fileURL, e){
    // 移除已存在的工具提示框，确保不会重复创建
    $("#toolTip").remove();
    
    // 创建并配置工具提示框的样式和行为
    $("<div/>", {
        "id": "toolTip",
        'css': {
            'width': '820px',
            'background': '#ffffff',
            'height': '500px',
            'position': 'absolute',
            'border-radius': '16px',
            'padding': '20px',
            'box-shadow' : '0 8px 32px rgba(0,0,0,0.1)', 
            'z-index': 2
        },
        'mouseleave': function() {
            // 当鼠标离开工具提示框时，调用函数移除它
            removeTooltip();
        }
    }).prependTo('body');
    
    // 在工具提示框内创建一个iframe，用于加载指定的文件内容
    $('<iframe>', {
        'src': fileURL,
        'id': 'adminFrame',
        'css': {
            width: '100%',
            height: '100%'
        },
        'frameborder': 0,
        'scrolling': 'yes'
    }).appendTo('#toolTip');

    // 计算鼠标位置和工具提示框的显示位置
    var mousePosX = e.pageX;
    var mousePosY = e.pageY;
    var parentWidth = $(document).width();
    var parentHeight = $(document).height();
    var ToolTipHeight = $("#toolTip").height();
    var ToolTipWidth = $("#toolTip").width();
    var maxTop = parentHeight - ToolTipHeight - 40;
    var maxLeft = parentWidth - ToolTipWidth - 40;
    var TooltipPosX;
    var TooltipPosY;

    // 根据鼠标位置和屏幕尺寸确定工具提示框的最终位置
    if(mousePosY <= maxTop){  
        TooltipPosY = mousePosY;
    } else {  
        TooltipPosY = (mousePosY - maxTop < maxTop) ? mousePosY - maxTop : maxTop;
    }
    if(mousePosX + ToolTipWidth <= parentWidth - mousePosX){
        TooltipPosX = mousePosX;
    } else {
        TooltipPosX = (mousePosX < maxLeft) ? mousePosX : maxLeft;
    }

    // 设置工具提示框的位置
    $("#toolTip").css("left", TooltipPosX);
    $("#toolTip").css("top", TooltipPosY);
}


/**
 * removeTooltip函数用于移除页面中ID为toolTip的元素
 * 此函数不接受任何参数，也不返回任何值
 * 它的主要作用是通过jQuery选择器找到ID为toolTip的元素，并将其从DOM中移除
 */
function removeTooltip(){
   $('#toolTip').remove();
}

/**
 * 需要加载 confirm 的 css 和 js 才能使用
 */
function confirmPlusGreen(content,tag)
{
    $.confirm({
        title: '系统操作确认',
        content: content,
        type: 'green',
        typeAnimated: true,
        buttons: {
            confirm: {
                text: '确认',
                btnClass: 'btn-green',
                action: function(){
                    console.log("You Click Yes");
                    emosWS.poke(tag,1);
                }
            },
            canel: {
                text: '取消',
                btnClass: 'btn-grey',
                action: function(){
                    console.log("You Click No");
                }
            },
        }
    });
}



/**
 * 显示对话框
 * @param {Object} options - 对话框的配置项
 * @param {string} options.title - 对话框的标题
 * @param {string} options.content - 对话框的内容
 * @param {Array} options.buttons - 对话框的按钮配置，每个按钮包含text和callback属性
 * @example 调用案例
 * showDialog({
        title: '操作确认',
        content: '您确定要删除这条记录吗？',
        buttons: [
            { 
                text: '确认删除',
                callback: () => console.log('执行删除操作')
            },
            {
                text: '取消',
                callback: () => console.log('取消操作')
            }
        ]
    });
 */

function showDialog(options) {
    // 合并默认参数
    const settings = $.extend({
        title: '提示',
        content: '内容',
        buttons: [
            { text: '确定', callback: () => this.close() }
        ]
    }, options);

    // 移除已存在的对话框
    $('.dialog-wrapper').remove();

    // 动态添加样式
    if (!$('#dialog-style').length) {
        const css = `
            /* 对话框遮罩层样式 */
            .dialog-wrapper .dialog-mask {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.5);
                z-index: 999;
            }
            /* 对话框主体样式 */
            .dialog-wrapper .dialog-body {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: white;
                padding: 20px;
                border-radius: 8px;
                min-width: 300px;
                box-shadow: 0 2px 10px rgba(0,0,0,0.2);
                z-index: 1000;
            }
            /* 对话框标题样式 */
            .dialog-wrapper .dialog-header {
                font-size: 18px;
                font-weight: bold;
                margin-bottom: 15px;
            }
            /* 对话框内容样式 */
            .dialog-wrapper .dialog-content {
                margin-bottom: 20px;
                color: #666;
            }
            /* 对话框按钮容器样式 */
            .dialog-wrapper .dialog-buttons {
                text-align: right;
            }
            /* 对话框按钮样式 */
            .dialog-wrapper .dialog-buttons button {
                margin-left: 10px;
                padding: 6px 15px;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                transition: opacity 0.3s;
            }
            /* 对话框按钮悬停样式 */
            .dialog-wrapper .dialog-buttons button:hover {
                opacity: 0.8;
            }
            /* 对话框第一个按钮样式 */
            .dialog-wrapper .dialog-buttons button:first-child {
                background: #007bff;
                color: white;
            }
            /* 对话框最后一个按钮样式 */
            .dialog-wrapper .dialog-buttons button:last-child {
                background: #6c757d;
                color: white;
            }
        `;
        $('<style id="dialog-style">' + css + '</style>').appendTo('head');
    }

    // 创建对话框结构
    const dialog = $(
        `<div class="dialog-wrapper">
            <div class="dialog-mask"></div>
            <div class="dialog-body">
                <div class="dialog-header"></div>
                <div class="dialog-content"></div>
                <div class="dialog-buttons"></div>
            </div>
        </div>`
    );

    // 填充内容
    dialog.find('.dialog-header').text(settings.title);
    dialog.find('.dialog-content').html(settings.content);

    // 添加按钮
    settings.buttons.forEach(btn => {
        const button = $('<button>')
            .text(btn.text)
            .click(function() {
                btn.callback();
                dialog.remove();
            });
        dialog.find('.dialog-buttons').append(button);
    });

    // 点击遮罩层关闭
    dialog.find('.dialog-mask').click(() => dialog.remove());

    // 添加到页面
    $('body').append(dialog);
}



/**
 * 显示一个带有输入框的对话框
 * @param {Object} options - 对话框的配置项
 * @exports
 * showPrompt({
        title: '修改用户名',
        message: '请输入新用户名：',
        defaultValue: '默认用户',
        onConfirm: (value) => {
            console.log('新用户名：', value);
            alert('已提交：' + value);
        },
        onCancel: () => {
            console.log('用户取消输入');
        }
    });
 */
function showPrompt(options) {
    // 合并默认参数
    const settings = $.extend({
        title: '请输入',
        message: '请输入内容：',
        defaultValue: '',
        confirmText: '确定',
        cancelText: '取消',
        onConfirm: (value) => console.log('输入值：', value),
        onCancel: () => console.log('取消输入')
    }, options);

    // 移除已存在的对话框
    $('.dialog-wrapper').remove();

    // 动态添加样式（合并到之前的样式，避免重复添加）
    if (!$('#dialog-style').length) {
        const css = `
            /* 对话框遮罩样式 */
            .dialog-wrapper .dialog-mask {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.5);
                z-index: 999;
            }
            /* 对话框主体样式 */
            .dialog-wrapper .dialog-body {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: white;
                padding: 20px;
                border-radius: 8px;
                min-width: 300px;
                box-shadow: 0 2px 10px rgba(0,0,0,0.2);
                z-index: 1000;
            }
            /* 对话框标题样式 */
            .dialog-wrapper .dialog-header {
                font-size: 18px;
                font-weight: bold;
                margin-bottom: 15px;
            }
            /* 对话框内容样式 */
            .dialog-wrapper .dialog-content {
                margin-bottom: 20px;
                color: #666;
            }
            /* 对话框按钮容器样式 */
            .dialog-wrapper .dialog-buttons {
                text-align: right;
            }
            /* 对话框按钮样式 */
            .dialog-wrapper .dialog-buttons button {
                margin-left: 10px;
                padding: 6px 15px;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                transition: opacity 0.3s;
            }
            /* 对话框按钮悬停样式 */
            .dialog-wrapper .dialog-buttons button:hover {
                opacity: 0.8;
            }
            /* 确认按钮样式 */
            .dialog-wrapper .dialog-buttons button:first-child {
                background: #007bff;
                color: white;
            }
            /* 取消按钮样式 */
            .dialog-wrapper .dialog-buttons button:last-child {
                background: #6c757d;
                color: white;
            }
            
            /* 新增输入框样式 */
            .dialog-wrapper .dialog-input {
                width: 100%;
                padding: 8px;
                margin: 10px 0;
                border: 1px solid #ddd;
                border-radius: 4px;
                box-sizing: border-box;
            }
            /* 输入框焦点样式 */
            .dialog-wrapper .dialog-input:focus {
                outline: none;
                border-color: #007bff;
                box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
            }
        `;
        $('<style id="dialog-style">' + css + '</style>').appendTo('head');
    }

    // 创建对话框结构
    const dialog = $(
        `<div class="dialog-wrapper">
            <div class="dialog-mask"></div>
            <div class="dialog-body">
                <div class="dialog-header"></div>
                <div class="dialog-content">
                    <div class="dialog-message"></div>
                    <input type="text" class="dialog-input" autofocus>
                </div>
                <div class="dialog-buttons"></div>
            </div>
        </div>`
    );

    // 填充内容
    dialog.find('.dialog-header').text(settings.title);
    dialog.find('.dialog-message').text(settings.message);
    const $input = dialog.find('.dialog-input').val(settings.defaultValue);

    // 添加按钮
    const buttons = [
        {
            text: settings.cancelText,
            callback: () => {
                settings.onCancel();
                return true;
            }
        },
        {
            text: settings.confirmText,
            callback: () => {
                const value = $input.val();
                settings.onConfirm(value);
                return true;
            }
        }
    ];

    buttons.forEach(btn => {
        const button = $('<button>')
            .text(btn.text)
            .click(function() {
                if (btn.callback() !== false) {
                    dialog.remove();
                }
            });
        dialog.find('.dialog-buttons').append(button);
    });

    // 处理回车键
    $input.on('keypress', function(e) {
        if (e.which === 13) {
            dialog.find('.dialog-buttons button:last-child').click();
        }
    });

    // 点击遮罩层关闭
    dialog.find('.dialog-mask').click(() => {
        settings.onCancel();
        dialog.remove();
    });

    // 添加到页面
    $('body').append(dialog);
}
